<template>
  <div class="mine-container">
    <van-nav-bar :title="$t('nav.mine')" fixed />
    <div class="content">
      <div class="user-card">
        <van-image
          round
          width="64"
          height="64"
          :src="userStore.userInfo.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
        />
        <div class="user-info">
          <div class="username">{{ userStore.userInfo.username || $t('mine.notLoggedIn') }}</div>
          <div class="user-id">ID: {{ userStore.userInfo.id || '--' }}</div>
        </div>
      </div>
      <van-cell-group inset class="menu-group">
        <van-cell :title="$t('mine.profile')" is-link />
        <van-cell :title="$t('mine.notifications')" is-link />
        <van-cell :title="$t('mine.privacy')" is-link />
        <van-cell :title="$t('mine.helpAndFeedback')" is-link />
        <van-cell :title="$t('mine.aboutUs')" is-link />
      </van-cell-group>
      <div class="logout-btn">
        <van-button block round type="danger" @click="handleLogout">{{ $t('mine.logout') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import useTheme from '@/hooks/useTheme'
import { onMounted } from 'vue'
const userStore = useUserStore()
// 引入主题钩子
const { theme } = useTheme()

const handleLogout = () => {
  userStore.clearUserInfo()
}
onMounted(() => {
  // 这里不需要额外操作，因为useTheme钩子应该已经在内部处理了初始化
  console.log('当前主题:', theme.value)
})
</script>

<style lang="scss" scoped>
.mine-container {
  padding-top: 46px;
  min-height: 100%;
  background-color: var(--background-color);

  .content {
    padding: $spacing-base;

    .user-card {
      display: flex;
      align-items: center;
      padding: $spacing-base;
      margin-bottom: $spacing-base;
      background-color: var(--white);
      border-radius: 8px;

      .user-info {
        margin-left: $spacing-base;

        .username {
          font-size: $font-size-lg;
          font-weight: 500;
          color: var(--text-color);
          margin-bottom: 4px;
        }

        .user-id {
          font-size: $font-size-sm;
          color: var(--text-color-light);
        }
      }
    }

    .menu-group {
      margin-bottom: $spacing-large;
    }

    .logout-btn {
      padding: 0 $spacing-base;
    }
  }
}
</style>